<template>
  <div class="main">
    <a-card>
        <span class="line">答案管理</span>
    </a-card>
    <div style="height: 24px"></div>
    <a-spin :spinning="loading">
        <div class="content">
            <a-card hoverable style="width: 15.5rem" v-for="(item, index) in PaperList" :key="index" class="content-card">
                <img
                    slot="cover"
                    alt="封面"
                    :src="item.cover"
                    style="width: 15.4rem; height: 13.5rem"
                />
                <template slot="actions" class="ant-card-actions">
                    <span v-on:click="selectHandleClick(item)">查看</span>
                    <span style="color: red; width: 100%" v-on:click="deleteHandleClick(item)">删除</span>
                </template>
            </a-card>

            <a-modal v-model="visible" title="查看模版组图片" @ok="handleOk" width="1024px">
                <div class="checkContent">
                    <img v-for="(item, index) in checkResult" :key="index"
                        :src="item"
                        style="width: 15.4rem; height: 13.5rem; margin: 5px 10px"
                    />
                    
                    
                </div>
            </a-modal>
        </div>
    </a-spin>
    
  </div>
</template>


<script>
// import { fetchPaperList, fetchAppInfo, relatedPaper, setReply, getKeywords, postKeywords } from '@/api/paper'
import { getTmpls, delTmpls } from '@/api/paper'
// import axios from 'axios'

export default {
    name: 'UserResult',
    components: {

    },
    data () {
        return {
            loading: false,
            visible: false,
            PaperList: [],
            checkResult: []
        }
    },
    methods: {
        init () {
            const _this = this;
            getTmpls()
                .then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        res.data.templates.forEach(i => {
                            if (i.bgurl == '') {
                                _this.PaperList.push({
                                    cover: i.infos[0],
                                    ...i
                                })
                            }
                        })
                    } else {
                        _this.$message.error('获取答案模版失败，请重新尝试')
                    }

                })
        },
        deleteHandleClick (e) {
            const { tmplId } = e
            const _this = this
            this.$confirm({
                title: `你确定要删除该答案吗？`,
                onOk: () => {
                    _this.loading = true
                    const hide = this.$message.loading('正在删除...', 0);
                    delTmpls({
                        tmplId: `${tmplId}`
                    })
                        .then(res => {
                            if (res.code == 200) {
                                _this.$message.success('删除成功')
                                // _this.init()
                                _this.PaperList.forEach((i, index) => {
                                    if (i.tmplId == tmplId) {
                                        _this.PaperList.splice(index, 1)
                                    }
                                })
                                _this.loading = false
                            } else {
                                _this.$message.error(res.errormsg ? res.errormsg : '删除失败，请重新尝试')
                                _this.loading = false
                            }
                            hide()
                        })
                },
                onCancel () {}
            })
        },
        selectHandleClick (e) {
            
            console.log(e)
            this.visible = true
            this.checkResult = [...e.infos]
        }
    },
    mounted: function () {
        this.init()
    }
}
</script>

<style lang="less" scoped>
    /deep/ .ant-layout-content {
        margin: 0 
    }
    .main {
        position: relative;
        width: 100%;
        .line {
            border-left: 5px solid #1890ff;
            padding-left: 10px;
            font-weight: 500;
            font-size: 16px;
        }
        .content {
            position: relative;
            margin-top: 24px;
            display: flex;
            flex-wrap: wrap;
            min-height: 100px;
            //  justify-content: space-between
            .content-card {
                margin-right: 30px;
                margin-bottom: 30px;
                
            }
            .checkContent {
                position: relative;
                display: flex;
            }
        }
    }

    

    
</style>